<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card style="width: 100%; margin-bottom: 10px" shadow="never">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="ordDto.licenseNumber"
            clearable
            style="width: 120px"
            placeholder="车牌号"
            size="small"
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="ordDto.number"
            clearable
            style="width: 120px"
            placeholder="自编号"
            size="small"
          >
          </el-input>
        </el-col>

        <el-col
          style="display: flex; justify-content: flex-end; align-items: center"
          :span="2"
        >
          <el-space :size="4">
            <el-button type="primary" plain size="small" @click="handleSearch"
              >搜索</el-button
            >
            <!-- <el-button type="danger" plain size="small" @click="drawer = true"
              >添加</el-button
            > -->
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格数据展示 EEF7FD -->
    <el-card
      style="width: 100%; background: #eef7fd; float: left"
      shadow="never"
    >
      <el-table
        :data="CarPerList"
        border
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="序号" width="120" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="licenseNumber"
          label="车牌"
          align="center"
          width="200"
        />
        <el-table-column
          prop="vehicleNumber"
          label="自编号"
          align="center"
          width="200"
        />
         
        <el-table-column prop="companyId" label="人员" align="center">
          <template #default="scope">
            <el-tag v-for="item in scope.row.perList" :key="item.id"
              >{{ item.name }}-{{ item.position }}- {{ item.tel }}</el-tag
            >
          </template>
        </el-table-column>     
         
        <el-table-column prop="updateTime" label="更新时间" align="center">
         
        </el-table-column>  
        <!-- <el-table-column prop="companyId" label="车组状态" align="center" width="200">
          <template #default="scope">
            <el-tag v-if="scope.row.states==0" type="success"
              >空闲</el-tag
            >
            <el-tag v-else type="danger"
              >作业中</el-tag
            > 
              
          </template>
        </el-table-column> -->

        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="handleEdit(scope)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer
      v-model="drawer"
      title="派工详情"
      :direction="direction"
      size="30%"
    >
      <el-select
        v-model="carValue"
        filterable
        clearable
        placeholder="选择车辆"
        style="width: 120px"
        @change="h"
      >
        <el-option
          v-for="item in tableData"
          :key="item.id"
          :label="item.licenseNumber"
          :value="item.id"
        />
      </el-select>

      <el-select
        v-model="perValue1"
        multiple
        clearable
        placeholder="选择人员"
        filterable
        style="width: 240px"
      >
        <el-option
          v-for="item in perList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <el-button type="primary" @click="handleSave">添加</el-button>
      <el-table
        :data="from"
        border
        v-loading="loading"
        style="width: 100%; margin-top: 1%"
      >
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="licenseNumber" label="区域" align="center" />
        <el-table-column prop="number" label="邮编" align="center" />
        <el-table-column label="比列/单" align="center">
          <template #default="scope">
            <el-tag v-for="item in scope.row.perList" :key="item.id"
              >{{ item.name }} - {{ item.position }}- {{ item.tel }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        style="width: 100%; margin-top: 1%; float: left"
        @click="onAddItem"
        >保存</el-button
      >
    </el-drawer>
  </div>
</template>
      
    <script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElLoading } from "element-plus";
import {
  getCarList,
  getCarPerList,
  findPersonnelList,
  saveCar,
} from "@/api/order";

const loading = ref(true);
const tableData = ref([]);
const direction = ref("rtl");
const CarPerList = ref([]);
const perList = ref([]);

const router = useRouter();
const drawer = ref(false);
const carValue = ref("");
// const perValue1 = ref("");
const perValue1 = ref([]);

const ordDto = ref({
  licenseNumber: "",
  number: "",
});

const from = ref([]);
onMounted(() => {
  getList();
  getCarPer_List();
  getPerList();
});

const getList = () => {
  getCarList(ordDto.value).then((res) => {
    loading.value = false;
    console.log(res);
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data;
    }
  });
};

//获取人员信息
const getPerList = () => {
  findPersonnelList(ordDto.value).then((res) => {
    loading.value = false;
    if (res.code === 200 && res.data !== null) {
      perList.value = res.data;
    }
  });
};

//获取人车分配信息
const getCarPer_List = () => {
  getCarPerList(ordDto.value).then((res) => {
    loading.value = false;
    console.log(res);
    if (res.code === 200 && res.data !== null) {
      CarPerList.value = res.data;
    }
  });
};

const handleSearch = () => {
  getCarPer_List();
};

const handleEdit = () => {};

const handleSave = () => {
  const temp = tableData.value.filter((item) => item.id === carValue.value);
  const temp2 = {
    cityId: temp[0].cityId,
    companyId: temp[0].companyId,
    id: temp[0].id,
    licenseNumber: temp[0].licenseNumber,
    number: temp[0].number,
  };

  const per = [];
  perValue1.value.forEach((item) => {
    console.log(item);
    const newper = {
      carId: temp[0].id,
      nameId: "",
      name: "",
      position: "",
      tel: "",
    };
    const per_temp = perList.value.filter((items) => items.id === item);
    if (per_temp.length > 0) {
      newper.nameId = per_temp[0].id;
      newper.name = per_temp[0].name;
      newper.position = per_temp[0].officialPosition;
      newper.tel = per_temp[0].telephone;
    }
    per.push(newper);
  });

  temp2.perList = per;
  const news = from.value;
  news.push(temp2);
  carValue.value = "";
  perValue1.value = [];
};

const onAddItem = () => {
  console.log(from.value);
  saveCar(from.value).then((res) => {
    console.log(res);
    if ((res.code = 200)) {
      drawer.value = false;
      from.value=[];
      getCarPer_List();
    }
  });
};
</script>
    <style scoped>
/*最外层透明*/
:deep(.el-table, .el-table__expanded-cell) {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
:deep(.el-table th, .el-table tr, .el-table td) {
  background-color: transparent !important;
  border: 0;
  color: #135294;
}
/*去除底边框*/
:deep.el-table td.el-table__cell {
  border: 0;
}
:deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
/*去除底部灰条.el-table::before*/
:deep .el-table::before {
  display: none;
}
.el-pagination {
  text-align: center;
  justify-content: center;
  color: #135294;
}
:deep .el-pagination__sizes,
.el-pagination__total {
  color: #135294 !important;
}
:deep .el-pagination button {
  background-color: transparent !important;
}
:deep .el-pager li {
  background-color: transparent !important;
}
:deep(.el-pagination button.is-disabled, .el-pagination button.is-disabled) {
  background-color: transparent !important;
}
:deep .el-pagination .el-select {
  width: 100px !important;
}
</style>